
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>G4F - Framework</title>
    <link rel="apple-touch-icon" sizes="180x180" href="dist/img/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="dist/img/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="dist/img/favicon-16x16.png">
    <link rel="manifest" href="dist/img/site.webmanifest">
    <style>
        :root {
            --colour-1: #000000;
            --colour-2: #ccc;
            --colour-3: #e4d4ff;
            --colour-4: #f0f0f0;
            --colour-5: #181818;
            --colour-6: #242424;
            --accent: #8b3dff;
            --gradient: #1a1a1a;
            --background: #16101b;
            --size: 70vw;
            --top: 50%;
            --blur: 40px;
            --opacity: 0.6;
        }

        @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

        /* Body and text color */
        body {
            background: var(--background);
            color: var(--colour-3);
            font-family: "Inter", sans-serif;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
            font-weight: bold;
        }

        /* Container for the main content */
        .container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            text-align: center;
            z-index: 1;
            transition: transform 0.25s ease-in;
        }

        .container.slide {
            transform: translateX(-100%);
            transition: transform 0.15s ease-out;
        }

        .slide-button {
            position: absolute;
            top: 20px;
            left: 20px;
            background: var(--colour-4);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            padding: 6px 8px;
        }

        header {
            font-size: 3rem;
            text-transform: uppercase;
            margin: 20px;
            color: var(--colour-4);
        }

        iframe {
            background: transparent;
            width: 100%;
            border: none;
        }

        #background {
            height: 100%;
            position: absolute;
            object-fit: cover;
            object-position: center;
            width: 100%;
            background: black;
        }

        .container * {
            z-index: 2;
        }

        .description, form p a {
            font-size: 1.2rem;
            margin-bottom: 30px;
            color: var(--colour-2);
        }

        .input-field {
            width: 80%;
            max-width: 400px;
            padding: 12px;
            margin: 10px 0;
            border: 2px solid var(--colour-6);
            background-color: var(--colour-5);
            color: var(--colour-3);
            border-radius: 8px;
            font-size: 1.1rem;
        }

        .input-field:focus {
            outline: none;
            border-color: var(--accent);
        }

        .button {
            background-color: var(--accent);
            color: var(--colour-3);
            border: none;
            padding: 15px 30px;
            font-size: 1.1rem;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s ease;
            margin-top: 15px;
            width: 100%;
            max-width: 400px;
            font-weight: bold;
            text-decoration: none;
            white-space: nowrap;
        }

        .button:hover {
            background-color: #7a2ccd;
        }

        .button-container {
            display: flex;
            flex-direction: row;
            align-items: center;
            gap: 10px;
        }

        .footer {
            margin-top: 30px;
            font-size: 0.9rem;
            color: var(--colour-2);
        }

        .hidden {
            display: none;
        }
    </style>
    <link rel="stylesheet" href="dist/css/all.min.css">
    <script src="dist/js/framework.js"></script>
    <script src="https://unpkg.com/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
    <script type="importmap">
        {
            "imports": {
                "@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.21.0/+esm"
            }
        }
    </script>
</head>
<body>
    <iframe id="background" src="background.html"></iframe>

    <button class="slide-button">
        <i class="fa-solid fa-arrow-left"></i>
    </button>

    <!-- Main Content -->
    <div class="container">
        <header>
            G4F - Framework
        </header>
        <div class="description">
            <span>Welcome to the G4F Web UI!</span><br>
            <span>Your AI assistant is ready to assist you.</span>
        </div>

        <div class="connected">
            <p><strong>Connected to:</strong><span> </span><span id="connect_status">...</span></p>
        </div>

        <!-- Input and Button -->
        <form action="chat/">
            <input type="text" name="token" class="input-field" placeholder="Enter an Access Token..." autocomplete="off">
            <div class="button-container">
                <a id="new_window" href="" class="button hidden" target="_blank">New Window</a>
                <button class="button">Submit</button>
            </div>
            <p>
                <a href="https://huggingface.co/settings/tokens" target="_blank">Get Access Token</a>
            </p>
            <img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-xl-dark.svg" alt="Sign in with Hugging Face" style="cursor: pointer; display: none;" id="signin">
        </form>
        <button id="signout" style="display: none">Sign out</button>
        <script type="module">
            import * as hub from "@huggingface/hub";
            import { oauthLoginUrl, oauthHandleRedirectIfPresent } from "@huggingface/hub";

            window.connectToBackend();

            window.addEventListener('load', async function() {
                if (!localStorage.getItem(window.translationKey)) {
                    try {
                        if (await translateAll()) {
                            window.location.reload();
                        }
                    } catch (e) {
                        console.debug(e);
                    }
                }
            });

            const isIframe = window.self !== window.top;
            const button = document.querySelector('form a.button');
            if (isIframe) {
                button.classList.remove('hidden');
            }

            const form = document.querySelector("form");
            const input = document.querySelector('form input[name="token"]');
            async function check_access_token() {
                const accessToken = input.value;
                if (!accessToken) {
                    return true;
                }
                let user;
                try {
                    user = await hub.whoAmI({accessToken: accessToken});
                } catch(e) {
                    console.log(e);
                    input.setCustomValidity("Invalid Access Token.");
                    localStorage.removeItem("HuggingFace-api_key");
                    if (localStorage.getItem("oauth")) {
                        localStorage.removeItem("oauth");
                        window.location.replace("/");
                    }
                    return false;
                }
                localStorage.setItem("HuggingFace-api_key", accessToken);
                localStorage.setItem("user", user.name);
                localStorage.setItem("report_error", "true")
                return true;
            }
            form.addEventListener("submit", async (e) => {
                e.preventDefault();
                if(await check_access_token()) {
                    e.currentTarget.submit();
                }
            });

            let oauthResult = localStorage.getItem("oauth");
            if (oauthResult) {
                let user;
                try {
                    oauthResult = JSON.parse(oauthResult);
                    user = await hub.whoAmI({accessToken: oauthResult.accessToken});
                } catch (e) {
                    console.error(e);
                    oauthResult = null;
                    localStorage.removeItem("oauth");
                    localStorage.removeItem("HuggingFace-api_key");
                }
            }
            oauthResult ||= await oauthHandleRedirectIfPresent();
            if (oauthResult) {
                localStorage.setItem("oauth", JSON.stringify(oauthResult));
                localStorage.setItem("HuggingFace-api_key", oauthResult.accessToken);
                localStorage.setItem("user", oauthResult.userInfo.fullname);
                document.getElementById("signout").style.removeProperty("display");
                document.getElementById("signout").onclick = async function() {
                    localStorage.removeItem("oauth");
                    localStorage.removeItem("HuggingFace-api_key");
                    window.location.replace("/");
                }
            } else {
                localStorage.removeItem("oauth");
                document.getElementById("signin").style.removeProperty("display");
                document.getElementById("signin").onclick = async function() {
                    window.location.href = (await oauthLoginUrl(window.oauthConfig));
                }
            }
        </script>

        <!-- Footer -->
        <div class="footer">
            <p>&copy; 2025 G4F. All Rights Reserved.</p>
            <p>Powered by the G4F framework</p>
        </div>
    </div>
    <script>
        (async () => {
            // const today = new Date().toJSON().slice(0, 10);
            // const max = 6;
            // const cache_id = Math.floor(Math.random() * max);
            // if (cache_id > 3) {
            //     let prompt;
            //     if (cache_id % 2 == 0) {
            //         prompt = `Today is ${new Date().toJSON().slice(0, 10)}.
            //         Create a single-page HTML screensaver reflecting the current season (based on the date).
            //         Avoid using any text.`;
            //     } else {
            //         prompt = `Create a single-page HTML screensaver. Avoid using any text.`;
            //     }
            //     const response = await fetch(`/backend-api/v2/create?prompt=${prompt}&filter_markdown=html&cache=${cache_id}`);
            //     const text = await response.text()
            //     if (text) {
            //         background.src = `data:text/html;charset=utf-8,${encodeURIComponent(text)}`;
            //     }
            // }

            const container = document.querySelector('.container');
            const button = document.querySelector('.slide-button');
            const slideIcon = button.querySelector('i');
            button.onclick = () => {
                if (container.classList.contains('slide')) {
                    container.classList.remove('slide');
                    slideIcon.classList.remove('fa-arrow-right');
                    slideIcon.classList.add('fa-arrow-left');
                } else {
                    container.classList.add('slide');
                    slideIcon.classList.remove('fa-arrow-left');
                    slideIcon.classList.add('fa-arrow-right');
                }
            }
        })();
    </script>
</body>
</html>